<template>
  <div v-if="!isDestroy" class="message-box" :class="[type]">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'Message',
  props: {
    type: {
      type: String,
      default: 'success'
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isDestroy: false
    }
  },
  created () {
    setTimeout(() => {
      this.isDestroy = true
      this.$nextTick(() => {
        this.$destroy()
      })
    }, 2000)
  },
  destroyed () {
    console.log('组件销毁')
    document.body.removeChild(this.$el)
  }
}
</script>

<style lang="scss" scoped>
.message-box {
  @include wh(100%, auto);
  padding: 40px;
  position: fixed;
  font-size: $font-size-m;
  top: 0;
  left: 0;
  text-align: center;
  &.success {
    background: green;
    color: #fff;
  }
  &.error {
    background: red;
    color: #fff;
  }
  &.info {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
  }
}
</style>
